import {
  BarsOutlined,
  CodepenOutlined,
  DatabaseOutlined,
  LayoutOutlined,
  NotificationOutlined,
} from '@ant-design/icons';
import { ActionType, DrawerForm, PageContainer } from '@ant-design/pro-components';
import { Badge, Menu } from 'antd';
import { SelectInfo } from 'rc-menu/lib/interface';
import React, { useEffect, useRef, useState } from 'react';
import { useAccess, useModel, history } from 'umi';
import AddActive from '../cues/active/components/AddActive';
import Clue from './clue';
import IrsClue from './irsClue';
import Masses from './masses';
import PageContainerAggregationCounty from './otherClue/components/PageContainerAggregationCounty/PageContainerAggregationCounty';
import { parse } from '@/utils/historyUtils';
import { getToken, setToken } from '@/utils/token';

type DetailsType = {
  id: string;
  name: string;
};

export default (): React.ReactNode => {
  const access = useAccess();

  const [tabActiveKey, setTabActiveKeyState] = useState<string>('clue');
const [menuVisible,setMenuVisible]=useState(false)
  const [reload, setReloadState] = useState(false);

  useEffect(() => {
    const { token } = parse(location.search) as { token: string };
    if (token && token.length > 0) {
      console.log('33333333333');
      setToken(token)
    }
  }, [])
  const renderBadge = (count: number, active = false) => {
    return (
      <Badge
        count={count}
        style={{
          marginBlockStart: -2,
          marginInlineStart: 4,
          color: active ? '#1890FF' : '#999',
          backgroundColor: active ? '#E6F7FF' : '#eee',
        }}
      />
    );
  };

  return (
    <PageContainer
      header={{
        title: (
          <div>
            <DrawerForm
              width="200px"
              trigger={<BarsOutlined style={{ fontSize: 20 }} />}
              drawerProps={{
                destroyOnClose: true,
                placement: 'left',
                closable: false,
              }}
              onVisibleChange={(visible: boolean) => {
                if (visible) {
                }
                setMenuVisible(visible)
              }}
              visible={menuVisible}
              submitter={false}
              onFinish={async (values) => { }}
            >
              <Menu
                onSelect={(info: SelectInfo) => {
                  const key = info.key;
                  let menuName = '';
                  // if (key === 'active') {
                  //   menuName = '报送线索';
                  // }
                  if (key === 'clue') {
                    menuName = '报送线索';
                  }
                  if (key === 'county') {
                    menuName = '其他线索';
                  }
                  if (key === 'masses') {
                    menuName = '群众爆料';
                  }
                  setMenuVisible(!menuVisible)
                  setTabActiveKeyState(info.key);
                }}
                style={{ width: '100%', height: '100%', borderInlineEnd: 'none' }}
                defaultSelectedKeys={[tabActiveKey]}
                mode="vertical"
                items={[
                  // {
                  //   label: <span>报送线索{renderBadge(0, tabActiveKey === 'all')}</span>,
                  //   key: 'active',
                  //   icon: <DatabaseOutlined />,
                  // },
                  {
                    label: <span>报送线索{renderBadge(0, tabActiveKey === 'all')}</span>,
                    key: 'clue',
                    icon: <DatabaseOutlined />,
                  },
                  {
                    label: <span>IRS 线索{renderBadge(0, tabActiveKey === 'pending')}</span>,
                    key: 'irs',
                    icon: <CodepenOutlined />,
                  },
                  {
                    label: <span>群众爆料{renderBadge(0, tabActiveKey === 'pending')}</span>,
                    key: 'masses',
                    icon: <NotificationOutlined />,
                  },
                  (access.线索征集x配置x管理员 && {
                    label: <span>其他线索{renderBadge(0, tabActiveKey === 'pending')}</span>,
                    key: 'county',
                    icon: <LayoutOutlined />,
                  }),
                ]}
              />
            </DrawerForm>
            <span style={{ marginLeft: 10 }}>全域线索归集</span>
          </div>
        ),
        breadcrumb: {
          items: [],
        },
        style: {
          paddingBlockEnd: 0,
        },
        extra: (
          <>
            <AddActive
              key="add_active"
              onRefurbish={() => {
                // window.location.reload()
                setReloadState(true)
              }}
              triggerMode="name"
            />
          </>
        ),
      }}
    >
      {/* {tabActiveKey === 'clue' ? (
        <Clue />
      ) : (
        // : tabActiveKey === 'county' ? (
        //   <PageContainerAggregationCounty />
        // ) : tabActiveKey === 'irs' ? (
        //   <IrsClue />
        // )
        <Masses />
      )} */}

      {tabActiveKey === 'clue' ? (
        <Clue reload={reload} />
      ) : tabActiveKey === 'county' ? (
        <PageContainerAggregationCounty />
      ) : tabActiveKey === 'irs' ? (
        <IrsClue />
      ) : (
        <Masses />
      )}
    </PageContainer>
  );
};
